<form method="post" action="" id="stepbystep">
    <div class="navig">
        <ul class="breadcrumb">
            <li class="first"><a href="javascript:void(0)" class="active"><span>Шаг 1</span></a></li>
            <li><a href="javascript:void(0)"><span>Шаг 2</span></a></li>
            <li><a href="javascript:void(0)"><span>Шаг 3</span></a></li>
            <li><a href="javascript:void(0)"><span>Шаг 4</span></a></li>
            <li><a href="javascript:void(0)"><span>Шаг 5</span></a></li>
        </ul>
    </div>

    <br/>

    <fieldset id="first-step" class="inner">
        <h2 class="fs-title">Местоположение</h2>

        <div class="pole">
            <br/>
            <span class="zagol"> Город:</span>
            <select name="city_id" class="form_input">
                <?php foreach ($cities as $city): ?>
                    <option value="<?php echo $city->id ?>"><?php echo $city->name ?></option>
                <?php endforeach ?>
            </select>
        </div>
    </fieldset>


    <fieldset id="second-step" class="inner hidden">
        <h2 class="fs-title">Товары:</h2>
        <span class="zagol"> Товар:</span>
        <select name="product_id" class="form_input">
            <?php foreach ($products as $product): ?>
                <option value="<?php echo $product->id ?>"
                        data-price="<?php echo $product->price ?>">
                    <?php echo $product->name . ' ' . $product->price . 'грн.' ?>
                </option>
            <?php endforeach ?>
        </select>
        <br>
        <span class="zagol">Количество:</span>
        <input class="form_input" name="quantity" value="1">
        <a id="quantity_more" href="#">/\</a>
        <a id="quantity_less" href="#">\/</a>
    </fieldset>

    <fieldset id="third-step" class="inner hidden">
        <h2 class="fs-title">Заказать</h2>
        <span class="zagol">Ф.И.О:</span>
        <input class="form_input" name="name"/>
        <br>
        <span class="zagol">E-mail:</span>
        <input class="form_input" name="email"/>
        <br>
        <span class="zagol">Телефон:</span>
        <input class="form_input" name="phone"/>

    </fieldset>


    <fieldset id="fourth-step" class="inner hidden">
        <h2 class="fs-title">Подтверждение</h2>
        <span class="zagol">Ф.И.О:</span>
        <span class="zagol" id="username"></span><br>
        <span class="zagol">E-mail:</span>
        <span class="zagol" id="useremail"></span><br>
        <span class="zagol">Телефон:</span>
        <span class="zagol" id="phone"></span><br>
        <span class="zagol">Город:</span>
        <span class="zagol" id="city"></span><br>
        <span class="zagol">Товар:</span>
        <span class="zagol" id="product"></span><br>
        <span class="zagol">Количество:</span>
        <span class="zagol" id="quantity">Ф.И.О</span><br>
        <span class="zagol">Сумма:</span>
        <span class="zagol" id="summa"></span>
    </fieldset>

    <fieldset id="last-step" class="inner hidden">
        <h2 class="fs-title">Спасибо, Ваш заказ успешно оформлен!</h2>
        <p>Наш менеджер свяжется с Вами в ближайше время</p>
        <p>Теперь вы можете оформлять и отслеживать заказы в личном кабинете.
            На ваш email отправлени письмо с дальнейшими инструкциями
        </p>
    </fieldset>

</form>

<script type="text/javascript">
    $(document).ready(function(){
        var quantity = $('input[name=quantity]');
        $(document).on("click", '#quantity_more', function(){
            quantity.val(parseInt(quantity.val())+1);
        });
        $(document).on("click", '#quantity_less', function(){
            if (quantity.val() > 0)
                quantity.val(parseInt(quantity.val())-1);
            else
                quantity.val(0);
        })
    })
</script>
<script>
    (function () {
        var prevLink = '<input class="button cancel" type="button" value="Назад">';
        var nextLink = '<input class="button continue" type="button" value="Далее">';
        var navHTML = '<div class="prev-next">' + prevLink + nextLink + '</div>';
        var FormData = [];

        $(function () {
            // init
            $('#stepbystep > fieldset').hide().append(navHTML);
            $('#first-step .cancel').remove();
            $('#last-step .continue').remove();

            // show first step
            $('#first-step').show();

            $('input.continue').click(function () {
                var whichStep = $(this).parent().parent().attr('id');
                updateBreadCrumb(whichStep, false);

                if (whichStep == 'first-step') {

                } else if (whichStep == 'second-step') {

                } else if (whichStep == 'third-step') {
                    $('#username').text($('input[name=name]').val());
                    $('#phone').text($('input[name=phone]').val());
                    $('#city').text($('select[name=city_id] option:checked').text());
                    $('#useremail').text($('input[name=email]').val());
                    $('#quantity').text($('input[name=quantity]').val());
                    $('#product').text($('select[name=product_id] option:checked').text());
                    $('#summa').text(parseFloat($('select[name=product_id] option:checked').attr('data-price'))*parseInt($('input[name=quantity]').val()) + 'грн.');
                } else if (whichStep == 'fourth-step') {
                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        url: '/order/create',
                        data: $('#stepbystep').serialize(),
                        success: function(data){
                            if (data.result == true)
                                console.log(data);
                        }
                    })
                } else if (whichStep == 'last-step') {

                }

                $(this).parent().parent().hide(300).next().show(300);

            });

            $('input.cancel').click(function () {
                $(this).parent().parent().hide(300).prev().show(300);
                updateBreadCrumb($(this).parent().parent().attr('id'), true);


            });
        })

        function updateBreadCrumb(whichStep, isCancel) {
            var bc = 1;
            if (isCancel) bc = -1;
            $('.breadcrumb a').removeClass('active');

            if (whichStep == 'second-step') {
                bc += 1;
            } else if (whichStep == 'third-step') {
                bc += 2;
            } else if (whichStep == 'fourth-step') {
                bc += 3;
            } else if (whichStep == 'last-step') {
                bc += 4;
            }
            $('.breadcrumb a:eq(' + bc + ')').addClass('active');
        }
    }());
</script>